<template>
    <div class="mylike">
        <div class="postarea">
        <div class="postlist" v-if="postlist.length > 0">
            <div class="post" v-for="(item, index) in postlist" :key="index">
                <div class="post-title" @click="godetail(item.post.id)"><h2>{{ item.post.title }}</h2></div>
                <div class="post-content" @click="godetail(item.post.id)" v-html="item.post.content"></div>
                <div class="post-footer" @click="godetail(item.post.id)">
                    <div class="post-like">点赞：{{ item.post.like_count }}</div>
                    <div class="post-favorite">收藏：{{ item.post.favorite_count }}</div>
                    <div class="post-time">发布于：{{ item.post.created_at }}</div>
                </div>
                <hr>

            </div>
        </div>
    </div>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { getmyfav } from '@/apis/post';
import { useRouter } from 'vue-router';

const postlist = ref([])
const router = useRouter()


onMounted(() => {
    getmyfav().then(
        res => {
            postlist.value = res.data
        }
    )

})

function godetail(id) {
    router.push({
        path: '/post/'+id
    })
}
</script>
<style scoped>
.mylike{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
h2{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.post-title{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    margin-left: 5%;
    cursor: pointer;
}
.post-content{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 90%;
    margin-left: 5%;
    cursor: pointer;
    height: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: wrap;
}
.itembtn{
    margin-left: 2%;
    margin-top: 10px;
    width: 45%;
    margin-bottom: 10px;
}
.post-footer{
    display: flex;
    justify-content: space-evenly;
    cursor: pointer;
}
</style>